<html lang="en">

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>WebWhiz Live Chat</title>
    <base target="_parent">
    <link rel="stylesheet" href="app.css">
</head>

<body>
    <!--A chatbot markup with a launcher to open and close vhat widget-->
    <div class="chat-wrap chat-wrap-ai-assistant" id="chat-wrap" style="opacity: 0">

        <div class="chat-launcher" id="chat-launcher">
            <button class="chat-launcher-btn" id="chat-launcher-btn">
            </button>
        </div>
        <div class="chat-widget">
            <div class="chat-header">
                <div class="chat-header-top">
                    <div class="chat-tabs" id="chat-tabs">
                        <button id="tab-ai-assistant">AI assistant</button>
                        <button id="tab-offline-msg">Offline message</button>
                        <div class="tabs-active" id="tabs-active"></div>
                    </div>
                    <div class="chat-actions" id="chat-actions">
                        <button class="chat-minimize-btn chat-actions-btn" id="chat-minimize-btn">
                            <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24"
                                stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em"
                                xmlns="http://www.w3.org/2000/svg" style="
                                width: 22px;
                                height: 22px;
                            ">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                <path
                                    d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z">
                                </path>
                                <path d="M9 4v16"></path>
                                <path d="M14 10l2 2l-2 2"></path>
                            </svg>
                        </button>
                        <button class="chat-maximize-btn chat-actions-btn" id="chat-maximize-btn">
                            <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24"
                                stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em"
                                xmlns="http://www.w3.org/2000/svg" style="
                        width: 22px;
                        height: 22px;
                    ">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                <path
                                    d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z">
                                </path>
                                <path d="M15 4v16"></path>
                                <path d="M10 10l-2 2l2 2"></path>
                            </svg>
                        </button>
                        <button title="Clear chat history" class="chat-clear-session-btn chat-actions-btn"
                            id="chat-clear-session-btn">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" class="feather feather-refresh-ccw">
                                <polyline points="1 4 1 10 7 10"></polyline>
                                <polyline points="23 20 23 14 17 14"></polyline>
                                <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"></path>
                            </svg>
                        </button>
                        <button class="chat-close-btn chat-actions-btn" id="chat-close-btn">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" class="feather feather-x">
                                <line x1="18" y1="6" x2="6" y2="18"></line>
                                <line x1="6" y1="6" x2="18" y2="18"></line>
                            </svg>
                        </button>
                    </div>
                </div>

                <div class="ai-assistant-header">
                    <h2 id="chat-heading">
                        I'm your AI assistant
                    </h2>
                    <p id="chat-description">Ask me anything. I can answer same like chatGPT but with the data from this
                        website</p>
                </div>
                <div class="offline-message-header">
                    <h2 id="offline-message-heading">
                        Offline message
                    </h2>
                    <p id="offline-message-description">Please fill out the form below and we will get back to you as
                        soon as possible.</p>
                </div>

            </div>
            <div id="chat-messages" class="chat-messages">
            </div>
            <div id="offline-message" class="offline-message">
                <div class="form-group">
                    <label for="offline-message-name"><span id="label-offline-message-name">Name</span> <span
                            class="form-required">*</span></label>
                    <input type="text" class="form-control" id="offline-message-name" placeholder="Enter your name">
                    <!--Error message-->
                    <div class="invalid-feedback required-field" id="invalid-feedback-name">This field is required</div>

                </div>
                <div class="form-group">
                    <label for="offline-message-email"><span id="label-offline-message-email">Email</span> <span
                            class="form-required">*</span></label>
                    <input type="text" class="form-control" id="offline-message-email" placeholder="Enter your email">
                    <!--Error message-->
                    <div class="invalid-feedback required-field" id="invalid-feedback-email">This field is required
                    </div>
                    <div class="invalid-feedback" id="invalid-feedback-email-invalid">Please enter a valid email</div>

                </div>
                <div class="form-group">
                    <label for="offline-message-message"><span id="label-offline-message-message">Message</span> <span
                            class="form-required">*</span></label>
                    <textarea class="form-control" rows="4" id="offline-message-message"
                        placeholder="Enter your message"></textarea>
                    <!--Error message-->
                    <div class="invalid-feedback required-field" id="invalid-feedback-message">This field is required
                    </div>

                </div>
                <button class="btn btn-primary" loadingText="Submitting..." id="offline-message-submit"
                    type="button">Submit</button>
                <div class="message-feedback message-feedback-success" id="message-success">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M9 11L11 13L15.5 8.5M11.9932 5.13581C9.9938 2.7984 6.65975 2.16964 4.15469 4.31001C1.64964 6.45038 1.29697 10.029 3.2642 12.5604C4.75009 14.4724 8.97129 18.311 10.948 20.0749C11.3114 20.3991 11.4931 20.5613 11.7058 20.6251C11.8905 20.6805 12.0958 20.6805 12.2805 20.6251C12.4932 20.5613 12.6749 20.3991 13.0383 20.0749C15.015 18.311 19.2362 14.4724 20.7221 12.5604C22.6893 10.029 22.3797 6.42787 19.8316 4.31001C17.2835 2.19216 13.9925 2.7984 11.9932 5.13581Z"
                            stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        </path>
                    </svg>

                    <span id="message-success-text">Your message sent successfully!</span>

                    <button class="btn btn-primary" id="offline-message-success-close" type="button">Send Again</button>
                </div>
                <div class="message-feedback message-feedback-error" id="message-error">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M16 16C16 16 14.5 14 12 14C9.5 14 8 16 8 16M17 9.24C16.605 9.725 16.065 10 15.5 10C14.935 10 14.41 9.725 14 9.24M10 9.24C9.605 9.725 9.065 10 8.5 10C7.935 10 7.41 9.725 7 9.24M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
                            stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>

                    <span id="message-error-text">Oops! Something went wrong</span>

                    <button class="btn btn-primary" id="offline-message-error-close" type="button">Try Again</button>
                </div>
            </div>
            <div class="chat-options">
              
                <div class="chat-sample-messages hide-sample-messages" id="chat-sample-messages">
                    <button type="button" class="chat-with-human switch-chat-btn" style="display: none;" id="chat-with-human">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M20 21C20 19.6044 20 18.9067 19.8278 18.3389C19.44 17.0605 18.4395 16.06 17.1611 15.6722C16.5933 15.5 15.8956 15.5 14.5 15.5H9.5C8.10444 15.5 7.40665 15.5 6.83886 15.6722C5.56045 16.06 4.56004 17.0605 4.17224 18.3389C4 18.9067 4 19.6044 4 21M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                             
                        Chat with the team</button>
                    <button type="button" class="chat-with-bot switch-chat-btn" style="display: none;" id="chat-with-bot">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M8.5 12.5C8.5 12.5 9.8125 14 12 14C14.1875 14 15.5 12.5 15.5 12.5M14.75 7.5H14.76M9.25 7.5H9.26M7 18V20.3355C7 20.8684 7 21.1348 7.10923 21.2716C7.20422 21.3906 7.34827 21.4599 7.50054 21.4597C7.67563 21.4595 7.88367 21.2931 8.29976 20.9602L10.6852 19.0518C11.1725 18.662 11.4162 18.4671 11.6875 18.3285C11.9282 18.2055 12.1844 18.1156 12.4492 18.0613C12.7477 18 13.0597 18 13.6837 18H16.2C17.8802 18 18.7202 18 19.362 17.673C19.9265 17.3854 20.3854 16.9265 20.673 16.362C21 15.7202 21 14.8802 21 13.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V14C3 14.93 3 15.395 3.10222 15.7765C3.37962 16.8117 4.18827 17.6204 5.22354 17.8978C5.60504 18 6.07003 18 7 18ZM15.25 7.5C15.25 7.77614 15.0261 8 14.75 8C14.4739 8 14.25 7.77614 14.25 7.5C14.25 7.22386 14.4739 7 14.75 7C15.0261 7 15.25 7.22386 15.25 7.5ZM9.75 7.5C9.75 7.77614 9.52614 8 9.25 8C8.97386 8 8.75 7.77614 8.75 7.5C8.75 7.22386 8.97386 7 9.25 7C9.52614 7 9.75 7.22386 9.75 7.5Z" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>                         
                        Chat with bot</button>
                </div>
            </div>

            <form id="chat-form" class="chat-input-wrap">
                <textarea rows='1' class="chat-input textarea js-auto-size" id="chat-input"
                    placeholder="Type your message"></textarea>
                <button class="chat-submit-btn" type="submit"><svg width="16" height="16" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd"
                            d="M4.394 14.7L13.75 9.3c1-.577 1-2.02 0-2.598L4.394 1.299a1.5 1.5 0 00-2.25 1.3v3.438l4.059 1.088c.494.132.494.833 0 .966l-4.06 1.087v4.224a1.5 1.5 0 002.25 1.299z"
                            fill="currentColor"></path>
                    </svg></button>
            </form>
            <a id="powered-by" class="powered-by" href="https://www.webwhiz.ai/" target="_blank">powered by
                webwhiz.ai</a>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/autosize.js/3.0.20/autosize.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.2.12/marked.min.js"></script>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
    <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"
        integrity="sha384-mZLF4UVrpi/QTWPA7BjNPEnkIfRFn4ZEO3Qt/HFklTJBj/gBOV8G3HcKn4NfQblz"
        crossorigin="anonymous"></script>



    <script type="module">
        const STREAM_RESPONSE = true;


        // message format

        let origin = '';
        let container = '';
        let socketData;

        let showReadMore = true;
        let readMoreText = 'Read More:';

        let isFirstMessage = true;

        let collectEmail = false;
        let enableHumanChat = false;
        let isManualChat = false;
        let collectEmailText = 'Read More:';

        const chatWithHumanButton = document.getElementById('chat-with-human');
        const chatWithBotButton = document.getElementById('chat-with-bot');

        const defaultWelcomeMessage = 'Hello! How can I assist you today?';
        const submitBtnSubmittingText = 'Submitting...';


        let sessionId = '';

        function getDomainFromUrl(url) {
            if (!url) return '';
            const matches = url.match(/^https?\:\/\/([^\/?#]+)(?:[\/?#]|$)/i);
            const domain = matches && matches[1]; // domain will be null if no match is found
            return (domain || '').replace('www.', '');
        }

        const urlParams = new URLSearchParams(window.location.search);

        let knowledgebaseId;
        const baseURL = urlParams.get('baseUrl') || process.env.WW_BASE_URL || 'https://api.webwhiz.ai';
        const chatWidget = document.querySelector('.chat-wrap');

        if (urlParams.get('embed') === 'true') {
            chatWidget.classList.add('widget-open');
        }
        if (urlParams.get('hide-chat-actions') === 'true') {
            chatWidget.classList.add('hide-chat-actions');
        }

        /**
         * Iframe communications
         */
        // Msg listener
        window.onmessage = function(event) {
            if (event.data.messageType === 'webwhiz:recieve_meta_data') {
                origin = event.data.url;
                container = event.data.container;

                if (container) {
                    const $chatLauncher = document.getElementById('chat-launcher');
                    const $chatActions = document.getElementById('chat-actions');
                    $chatLauncher.parentNode.removeChild($chatLauncher);
                    $chatActions.parentNode.removeChild($chatActions);
                    chatWidget.classList.add('widget-open');

                    notifyParentWidgetExpand();
                    setTimeout(() => {
                        document.getElementById('chat-input').focus();
                    }, 320);
                }
            } else if (event.data.messageType === 'webwhiz:recieve_session_id') {
                sessionId = event.data.sessionId;
            } else if (event.data.messageType === 'webwhiz:recieve_is_manual_chat') {
                isManualChat = event.data.isManualChat;
            } else if (event.data.messageType === 'webwhiz:expandWidget') {
                expandWidget();
            }
        }

        requestSessionId();
        requestIsManualChat();
        setTimeout(() => {
            getWidgetMessages()
        }, 50);

        const defaultWidgetData = {
            backgroundColor: "#000",
            fontColor: "#FFF",
            borderRadius: "12px",
            placement: "right"
        }

        const validateEmail = (email) => {
            return String(email)
                .toLowerCase()
                .match(
                    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
                );
        };

        const uuidv4 = () => {
            return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
                (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
            );
        }

        marked.setOptions({
            highlight: function(code, lang) {
                const language = hljs.getLanguage(lang) ? lang : 'plaintext';
                const hl = hljs.highlight(code, { language: 'javascript' }).value;
                return hl;
            },
            langPrefix: 'hljs language-', // highlight.js css expects a top-level 'hljs' class.
        });

        function escapeRegExp(string) {
            return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
        }
        function replaceAll(str, find, replace) {
            return str.replace(new RegExp(escapeRegExp(find), 'g'), replace);
        }


        function resetChatHistory() {
            const chatMessages = document.getElementById('chat-messages');
            chatMessages.innerHTML = '';
            sessionId = '';
            isManualChat = false;
            if (enableHumanChat) {
                chatWithHumanButton.style.display = 'flex';
                chatWithBotButton.style.display = 'none';
            }
            notifyClearHistory();
        }


        autosize(document.querySelector('#chat-input'));

        // toggle class on chat widget on chat-launcher-btn
        const chatLauncherBtn = document.querySelector('.chat-launcher-btn');
        const chatCloseBtn = document.querySelector('#chat-close-btn');
        const chatMaximizeBtn = document.querySelector('#chat-maximize-btn');
        const chatMinimizeBtn = document.querySelector('#chat-minimize-btn');
        const chatClearHistoryBtn = document.querySelector('#chat-clear-session-btn');
        chatLauncherBtn.addEventListener('click', () => {
            expandWidget();
        });
        chatCloseBtn.addEventListener('click', () => {
            chatWidget.classList.remove('widget-open');
            chatWidget.classList.remove('widget-maximize');
            notifyParentWidgetCollapse();
        });
        chatMaximizeBtn.addEventListener('click', () => {
            chatWidget.classList.toggle('widget-maximize');
            notifyParentWidgetMaximize();
        });
        chatMinimizeBtn.addEventListener('click', () => {
            chatWidget.classList.toggle('widget-maximize');
            notifyParentWidgetMinimize();
        });
        chatClearHistoryBtn.addEventListener('click', resetChatHistory);

        function expandWidget() {
            chatWidget.classList.add('widget-open');

            notifyParentWidgetExpand();
            setTimeout(() => {
                const chatMessages = document.getElementById('chat-messages');
                chatMessages.scrollTop = chatMessages.scrollHeight;
                document.getElementById('chat-input').focus();
            }, 320);
        }

        async function getWidgetData() {
            //const domain = 'chat.timemaster.ai';
            let url;
            const kbId = urlParams.get('kbId');
            if (kbId) {
                knowledgebaseId = kbId;
                url = `${baseURL}/knowledgebase/${knowledgebaseId}/chat_widget_data`;
            } else {
                const domain = getDomainFromUrl(window.location.href);
                url = `${baseURL}/knowledgebase/chat_widget_data_for_domain?domain=${domain}`;
                chatWidget.classList.add('hide-chat-actions', 'widget-open');
            }
            const response = await fetch(
                url,
                {
                    method: 'GET', // *GET, POST, PUT, DELETE, etc.
                    headers: {
                        Accept: 'application/json',
                        'Content-Type': 'application/json',
                    },
                    referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
                    // body data type must match "Content-Type" header
                }
            );

            if (response.status === 200) {
                const releaseBody = await response.json();
                const chatWidgeData = releaseBody.chatWidgeData || defaultWidgetData;
                return {
                    ...releaseBody,
                    chatWidgeData: chatWidgeData
                }
            } else {
                console.log('error');
            }
            //return response;
        }


        async function getWidgetMessages() {
            if (!sessionId) {
                return;
            }
            const url = `${baseURL}/chatbot/session/${sessionId}/messages`;
            try {
                const response = await fetch(url, {
                    method: 'GET',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                    },
                    referrerPolicy: 'no-referrer',
                });
                if (response.status === 200) {
                    const { messages: _messages } = await response.json();

                    const messages = _messages.map(({ role, content, id }) => ({
                        role: role === 'admin' || role === 'bot' ? 'assistant' : role,
                        content,
                        id,
                    }));

                    if (messages.length > 0) {
                        isFirstMessage = false;
                    }

                    const msgHTML = messages.map(msg => {
                        let msgContent = msg.content.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/<br\/>/g, '\n');
                        const markdownRes = marked.parse(msgContent);

                        if (msg.role === 'divider') {
                            return createChatWithDivider(msgContent);
                        }

                        const type = msg.role === 'user' ? 'user' : 'chatbot';
                        return `<div class="chat-message ${type}"><div class="chat-message-text">${markdownRes}</div></div>`;
                    }).join('');

                    const chatMessages = document.getElementById('chat-messages');
                    chatMessages.insertAdjacentHTML("beforeend", msgHTML);
                    chatMessages.scrollTop = chatMessages.scrollHeight;
                } else if (response.status === 404) {
                    resetChatHistory()
                } else {
                    console.error('Failed to fetch messages: Status', response.status);
                }
            } catch (error) {
                console.error('Error fetching messages:', error);
            }
        }

        async function initSocketConnection(sessionId) {
            var socket = io(`${baseURL}`, { transports: ["websocket"], query: { id: sessionId, knowledgeBaseId: knowledgebaseId } });
            socket.on('connect', function() {
                console.log('connected');
            });
            socket.on('user_chat', function(msgData) {
                // append to UI 
                const chatMessage = createChatMessage(msgData.msg, true);
                insertMessageIntoUI(chatMessage);
            });
            return socket;
        }

        (async () => {

            const data = await getWidgetData();
            if (!knowledgebaseId) {
                knowledgebaseId = data.id;
            }
            const chatWidgetData = data.chatWidgeData;
            showReadMore = chatWidgetData.showReadMore;
            collectEmail = chatWidgetData.collectEmail;

            enableHumanChat = chatWidgetData.enableHumanChat
            if (enableHumanChat) {
                chatWithHumanButton.style.display = isManualChat ? 'none' : 'flex';
                chatWithBotButton.style.display = isManualChat ? 'flex' : 'none';
            } else {
                isManualChat = false;
                updateIsManualChat(false)
            }

            requestMetaData();
            socketData = await initSocketConnection(sessionId)

            const heading = document.getElementById('chat-heading');
            const description = document.getElementById('chat-description');
            const offlineMsgHeading = document.getElementById('offline-message-heading');
            const offlineMsgDescription = document.getElementById('offline-message-description');
            const branding = document.getElementById('powered-by');
            const buttonElement = document.getElementById("chat-launcher-btn");
            const chatInputElement = document.getElementById("chat-input");
            const offlineMsgNameLabel = document.getElementById("label-offline-message-name");
            const offlineMsgEmailLabel = document.getElementById("label-offline-message-email");
            const offlineMsgMessageLabel = document.getElementById("label-offline-message-message");
            const offlineMsgNameInput = document.getElementById("offline-message-name");
            const offlineMsgEmailInput = document.getElementById("offline-message-email");
            const offlineMsgMessageInput = document.getElementById("offline-message-message");
            const requiredFieldErrorMsg = document.querySelectorAll('.required-field');
            const invalidEmailErrorMsg = document.getElementById('invalid-feedback-email-invalid');
            const formSubmitSuccessMsg = document.getElementById("message-success-text");
            const formSubmitErrorMsg = document.getElementById("message-error-text");
            const formSendAgainBtn = document.getElementById("offline-message-success-close");
            const formTryAgainBtn = document.getElementById("offline-message-error-close");

            const defaultLauncherIcon = `<svg 
                focusable="false" 
                stroke="currentColor" 
                fill="none" 
                stroke-width="2" 
                viewBox="0 0 24 24"
                stroke-linecap="round" 
                stroke-linejoin="round" 
                height="1em" 
                width="1em" 
                xmlns="http://www.w3.org/2000/svg"
                style=" width: 38px; height: 38px;">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path
                    d="M5.821 4.91c3.898 -2.765 9.469 -2.539 13.073 .536c3.667 3.127 4.168 8.238 1.152 11.897c-2.842 3.447 -7.965 4.583 -12.231 2.805l-.232 -.101l-4.375 .931l-.075 .013l-.11 .009l-.113 -.004l-.044 -.005l-.11 -.02l-.105 -.034l-.1 -.044l-.076 -.042l-.108 -.077l-.081 -.074l-.073 -.083l-.053 -.075l-.065 -.115l-.042 -.106l-.031 -.113l-.013 -.075l-.009 -.11l.004 -.113l.005 -.044l.02 -.11l.022 -.072l1.15 -3.451l-.022 -.036c-2.21 -3.747 -1.209 -8.392 2.411 -11.118l.23 -.168z"
                    stroke-width="0" fill="currentColor"></path>
            </svg>`

            const iconContainer = document.createElement("div");
            iconContainer.innerHTML = data?.launcherIcon?.svgElement || defaultLauncherIcon;
            buttonElement.appendChild(iconContainer);

            if (data.customKey || chatWidgetData.hideBranding || data.whitelabelling?.removeBranding) {
                branding.style.display = 'none';
            }

            if (chatWidgetData.offlineMsgTabHeader) {
                offlineMsgTab.innerText = chatWidgetData.offlineMsgTabHeader;
            }

            if (chatWidgetData.assistantTabHeader) {
                aiAssistantTab.innerText = chatWidgetData.assistantTabHeader;

                requestAnimationFrame(() => {
                    const width = aiAssistantTab.offsetWidth;
                    tabsActive.style.width = `${width - 5}px`;
                });
            }

            if (chatWidgetData.heading) {
                heading.innerText = chatWidgetData.heading;
            }
            if (chatWidgetData.description) {
                description.innerText = chatWidgetData.description;
            }

            if (chatWidgetData.chatInputPlaceholderText) {
                chatInputElement.placeholder = chatWidgetData.chatInputPlaceholderText;
            }

            let welcomeMessages = [];

            if (chatWidgetData.welcomeMessage) {
                welcomeMessages.push(chatWidgetData.welcomeMessage);
            } else {
                welcomeMessages = chatWidgetData.welcomeMessages || [defaultWelcomeMessage];
            }
            const welcomeMessagesHTML = welcomeMessages.map(msg => {
                return `<div class="chat-message chatbot"><div class="chat-message-text">${msg}</div></div>`
            }).join('');

            const chatMessages = document.getElementById('chat-messages');
            chatMessages.insertAdjacentHTML("afterbegin", welcomeMessagesHTML)

            if (chatWidgetData.offlineMessage) {
                const chatWrap = document.getElementById('chat-wrap');
                chatWrap.classList.add('has-offline-message');
            }

            if (chatWidgetData.readMoreText) {
                readMoreText = chatWidgetData.readMoreText;
            }

            collectEmailText = chatWidgetData.collectEmailText || collectEmailText;

            if (chatWidgetData.offlineMsgHeading) {
                offlineMsgHeading.innerText = chatWidgetData.offlineMsgHeading;
            }

            if (chatWidgetData.offlineMsgDescription) {
                offlineMsgDescription.innerText = chatWidgetData.offlineMsgDescription;
            }

            if (chatWidgetData.nameFieldLabel) {
                offlineMsgNameLabel.innerText = chatWidgetData.nameFieldLabel;
            }

            if (chatWidgetData.emailFieldLabel) {
                offlineMsgEmailLabel.innerText = chatWidgetData.emailFieldLabel;
            }

            if (chatWidgetData.msgFieldLabel) {
                offlineMsgMessageLabel.innerText = chatWidgetData.msgFieldLabel;
            }

            if (chatWidgetData.nameFieldPlaceholder) {
                offlineMsgNameInput.placeholder = chatWidgetData.nameFieldPlaceholder;
            }

            if (chatWidgetData.emailFieldPlaceholder) {
                offlineMsgEmailInput.placeholder = chatWidgetData.emailFieldPlaceholder;
            }

            if (chatWidgetData.msgFieldPlaceholder) {
                offlineMsgMessageInput.placeholder = chatWidgetData.msgFieldPlaceholder;
            }

            if (chatWidgetData.requiredFieldMsg) {
                requiredFieldErrorMsg.forEach(div => {
                    div.innerText = chatWidgetData.requiredFieldMsg;
                });
            }

            if (chatWidgetData.invalidEmailMsg) {
                invalidEmailErrorMsg.innerText = chatWidgetData.invalidEmailMsg;
            }

            if (chatWidgetData.formSubmitBtnLabel) {
                offlineMessageBtn.innerText = chatWidgetData.formSubmitBtnLabel;
            }

            formSubmitBtnSubmittingText = chatWidgetData.formSubmitBtnSubmittingText ?? submitBtnSubmittingText;

            if (chatWidgetData.formSubmitSuccessMsg) {
                formSubmitSuccessMsg.innerText = chatWidgetData.formSubmitSuccessMsg;
            }

            if (chatWidgetData.formSubmitErrorMsg) {
                formSubmitErrorMsg.innerText = chatWidgetData.formSubmitErrorMsg;
            }

            if (chatWidgetData.formSendAgainBtnLabel) {
                formSendAgainBtn.innerText = chatWidgetData.formSendAgainBtnLabel;
            }

            if (chatWidgetData.formTryAgainBtnLabel) {
                formTryAgainBtn.innerText = chatWidgetData.formTryAgainBtnLabel;
            }

            var styleSheet = document.createElement('style');
            styleSheet.type = "text/css";

            const styles = `
                .chat-widget { border-radius: ${chatWidgetData.borderRadius}!important}
                .chat-header, .chat-loading-dot, .chat-launcher-btn { background-color: ${chatWidgetData.backgroundColor}!important}
                .chat-wrap {
                    opacity: 1 !important;
                }
                .chat-launcher-btn {
                    color: ${chatWidgetData.fontColor}!important
                }
                .chat-header, .chat-tabs button, .btn-primary {color: ${chatWidgetData.fontColor}!important}
                .tabs-active, .btn-primary {background-color: ${chatWidgetData.backgroundColor}!important}
                .chat-submit-btn svg, .message-feedback, .lead-done-icon {
                    color: ${chatWidgetData.backgroundColor}!important
                }
                .chat-message.user .chat-message-text {background-color: ${chatWidgetData.backgroundColor}!important; color: ${chatWidgetData.fontColor}!important}
            `
            styleSheet.textContent = (chatWidgetData?.customCSS || '') + styles;


            if (chatWidgetData.questionExamples && chatWidgetData.questionExamples.length > 0 || chatWidgetData.enableHumanChat) {
                const sampleMessages = document.getElementById('chat-sample-messages');
                sampleMessages.classList.remove('hide-sample-messages');
                chatWidgetData.questionExamples.forEach((message) => {
                    if(!message.label || !message.question) return;
                    const sampleMessage = document.createElement('div');
                    sampleMessage.classList.add('chat-sample-message');
                    sampleMessage.setAttribute('data-message', message.question);
                    sampleMessage.innerText = message.label;
                    sampleMessages.appendChild(sampleMessage);
                });
            }

            document.getElementById('chat-sample-messages').addEventListener('click', (e) => {
                if (e.target.classList.contains('chat-sample-message')) {
                    const message = e.target.getAttribute('data-message') || e.target.innerText;
                    addMessageToChat(message);
                }
            });



            chatWithHumanButton.addEventListener('click', async (e) => {
                if (!enableHumanChat) return;
                chatWithHumanButton.style.display = 'none';
                chatWithBotButton.style.display = 'flex';
                if (!sessionId) {
                    sessionId = await createSession({
                        userAgent: getUserAgent(),
                        origin: origin
                    });
                    notifyNewSession(sessionId);
                }
                await initManualChat(sessionId);
                document.getElementById('chat-input').focus();

            });

            chatWithBotButton.addEventListener('click', async (e) => {
                chatWithBotButton.style.display = 'none';
                chatWithHumanButton.style.display = 'flex';
                if (!sessionId) {
                    sessionId = await createSession({
                        userAgent: getUserAgent(),
                        origin: origin
                    });
                    notifyNewSession(sessionId);
                }
                await initBotChat(sessionId);
                document.getElementById('chat-input').focus();
            });

            const widgetConfig = {}

            if (chatWidgetData.placement === 'left') {
                const chatLauncher = document.getElementById('chat-launcher');
                chatLauncher.style.left = '20px';
                chatLauncher.style.right = 'auto';
                widgetConfig.position = 'left';
            }
            if (chatWidgetData.showAsPopup) {
                widgetConfig.showAsPopup = true;
                widgetConfig.popupDelay = chatWidgetData.popupDelay;
                widgetConfig.welcomeMessages = chatWidgetData.welcomeMessages;
            }
            notifyWidgetConfig(widgetConfig);

            setTimeout(() => {
                document.head.appendChild(styleSheet);
            }, 400);


        })();


        async function createSession(userData) {
            const response = await fetch(
                `${baseURL}${'/chatbot/session?src=widget'}`,
                {
                    method: 'POST', // *GET, POST, PUT, DELETE, etc.
                    headers: {
                        Accept: 'application/json',
                        'Content-Type': 'application/json',
                    },
                    referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
                    body: JSON.stringify({
                        "knowledgebaseId": knowledgebaseId,
                        userData: userData
                    }), // body data type must match "Content-Type" header
                }
            );

            if (response.status === 200) {
                const result = await response.text()
                socketData = await initSocketConnection(result);
                return result;
            } else {
                console.log('error');
            }
            //return response;
        }

        async function initManualChat(sessionId) {
            const url = `${baseURL}/chatbot/session/${sessionId}/initiate-manual`;
            try {
                const response = await fetch(url, {
                    method: 'POST',
                    headers: {
                        Accept: 'application/json',
                        'Content-Type': 'application/json',
                    },
                    referrerPolicy: 'no-referrer',
                    body: JSON.stringify({}),
                });

                if (response.status === 200) {
                    const result = await response.text();
                    insertMessageIntoUI(createChatWithDivider(`Chat with the Team!`));
                 
                    isManualChat = true;
                    updateIsManualChat(isManualChat)

                } else {
                    console.error('Error:', response.status);
                }
            } catch (error) {
                console.error('Network error:', error.message);
            }
        }
        async function initBotChat(sessionId) {
            const url = `${baseURL}/chatbot/session/${sessionId}/initiate-bot`;
            try {
                const response = await fetch(url, {
                    method: 'POST',
                    headers: {
                        Accept: 'application/json',
                        'Content-Type': 'application/json',
                    },
                    referrerPolicy: 'no-referrer',
                    body: JSON.stringify({}),
                });

                if (response.status === 200) {
                    const result = await response.text();
                    insertMessageIntoUI(createChatWithDivider('Chat with the bot!'));
                    isManualChat = false;
                    updateIsManualChat(isManualChat)
               

                } else {
                    console.error('Error:', response.status);
                }
            } catch (error) {
                console.error('Network error:', error.message);
            }
        }

        async function updateSession(sessionId, userData) {
            const response = await fetch(
                `${baseURL}/chatbot/session/${sessionId}`,
                {
                    method: 'PUT', // *GET, POST, PUT, DELETE, etc.
                    headers: {
                        Accept: 'application/json',
                        'Content-Type': 'application/json',
                    },
                    referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
                    body: JSON.stringify({
                        userData: userData
                    }), // body data type must match "Content-Type" header
                }
            );
            if (response.status === 200) {
                const result = await response.text()
                return result;
            } else {
                console.log('error');
            }
            //return response;
        }

        async function getAnswer(sessionId, query) {
            const response = await fetch(
                `${baseURL}${'/chatbot/answer'}`,
                {
                    method: 'POST', // *GET, POST, PUT, DELETE, etc.
                    headers: {
                        Accept: 'application/json',
                        'Content-Type': 'application/json',
                    },
                    referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
                    body: JSON.stringify({
                        "sessionId": sessionId,
                        "query": query
                    }), // body data type must match "Content-Type" header
                }
            );

            if (response.status === 200) {
                const result = await response.text()
                return result;
            } else {
                console.log('error');
            }
            //return response;
        }

        function getAnswerStream(sessionId, query, cb, errorCb) {
            const url = `${baseURL}${'/chatbot/answer_stream'}?session=${sessionId}&query=${encodeURIComponent(query)}`;
            let source = new EventSource(url);

            source.onmessage = (e) => {
                cb(e.data);
                if (e.data == "[DONE]") {
                    source.close();
                }
            };

            source.onerror = (err) => {
                source.close();
                errorCb();
            };
        }

        function getUserAgent() {
            return navigator.userAgent || navigator.vendor || window.opera
        }

        function createChatWithDivider(chatWithWhom) {
            return `
                <div class="divider">
                    <span class="divider-line"></span>
                    <span class="divider-text">${chatWithWhom}</span>
                    <span class="divider-line"></span>
                </div>
                `;
        };


        function createChatMessage(msg, isChatbot) {
            const messageType = isChatbot ? 'chatbot' : 'user';
            return `<div class="chat-message ${messageType}">
                <div class="chat-message-text">${msg}</div>
            </div>
            `;
        };

        function insertMessageIntoUI(message) {
            const chatMessages = document.getElementById('chat-messages');
            chatMessages.insertAdjacentHTML('beforeend', message);
            chatMessages.scrollTop = chatMessages.scrollHeight;
        };

        async function addMessageToChat(message) {

            const input = document.getElementById('chat-input');
            message = message || input.value.trim();
            if (!message) return;
            const newMessageUser = {
                role: "user",
                content: message,
                id: uuidv4(),
            };

            const chatMessages = document.getElementById('chat-messages');
            chatMessages.insertAdjacentHTML("beforeend",
                `<div class="chat-message user"><div class="chat-message-text">${message}</div></div>`)

            const lastMesage = chatMessages.lastChild.querySelector('.chat-message-text');
            chatMessages.scrollTop = chatMessages.scrollHeight;
            input.value = '';
            autosize.update(input);


            if (isManualChat) {
                if(!sessionId) {
                    sessionId = await createSession({
                        userAgent: getUserAgent(),
                        origin: origin
                    });
                    notifyNewSession(sessionId);
                }
                const msgData = { 'sender': 'user', 'msg': message,  id: uuidv4(), 'sessionId': sessionId }
                // send message to admin
                socketData.emit('user_chat', msgData);

                return;
            }
            if (STREAM_RESPONSE) {
                chatMessages.insertAdjacentHTML("beforeend",
                    `<div class="chat-message chatbot"><div class="chat-message-text"><div class='chat-loading-dot-cont'>
											<div class="chat-loading-dot"></div>
											<div class="chat-loading-dot"></div>
											<div class="chat-loading-dot"></div>
										</div></div></div>`)
                chatMessages.scrollTop = chatMessages.scrollHeight;
                const msgHolder = chatMessages.lastChild.querySelector('.chat-message-text');
                let msg = '';
                if (!sessionId) {
                    sessionId = await createSession({
                        userAgent: getUserAgent(),
                        origin: origin
                    });
                    notifyNewSession(sessionId);
                }
                const response = getAnswerStream(sessionId, message, (data) => {

                    if (data !== "[DONE]") {
                        data = JSON.parse(data);
                        let content = data.content;
                        let sources = data.sources;
                        content = replaceAll(content, '<', '&lt;')
                        content = replaceAll(content, '>', '&gt;')
                        content = replaceAll(content, '\n', '<br/>')

                        let sourcesBtns = '';
                        if (showReadMore && sources && sources.length > 0) {

                            sources = sources.filter((p, i) => {
                                return i === sources.findIndex(q => q.url === p.url);
                            });

                            sourcesBtns = sources.map((source) => {
                                const parts = source.url.split('/');
                                const lastSegment = parts.pop() || parts.pop();
                                return `<a href="${source.url}" target="_blank" class="chat-source-btn">${lastSegment}</a>`
                            }).join('');
                            sourcesBtns = `<div class="chat-sources"><div class="chat-source-read-more">${readMoreText}</div>${sourcesBtns}</div>`
                        }

                        //data = data.replace(/\n/g, '<br/>')
                        msg = `${msg}${content}${sourcesBtns}`
                        msgHolder.innerHTML = msg;
                    } else {
                        const newMessageAssistant = {
                            role: "assistant",
                            content: msg,
                            id: uuidv4(),
                        };
                        msg = replaceAll(msg, '&lt;', '<')
                        msg = replaceAll(msg, '&gt;', '>')
                        msg = replaceAll(msg, '<br/>', '\n')
                        const markdownRes = marked.parse(msg);
                        msgHolder.innerHTML = markdownRes;
                        if (collectEmail && isFirstMessage) {
                            const collectEmailMarkup = `<div class="chat-message chatbot">
                                    <div
                                        class="chat-message-text chat-message-form"
                                        id="chat-message-form-email"
                                    >
                                        <div class="form-group">
                                            <label
                                                for="lead-email-input"
                                                >${collectEmailText}</label
                                            >
                                            <div id="lead-email-form" class="input-group">
                                                <input
                                                    type="text"
                                                    class="form-control"
                                                    id="lead-email-input"
                                                    placeholder="hi@example.com"
                                                />
                                                <button
                                                    class="chat-submit-btn"
                                                    id="lead-email-input-submit"
                                                    type="submit"
                                                >
                                                    <svg
                                                        width="16"
                                                        height="16"
                                                        fill="none"
                                                        xmlns="http://www.w3.org/2000/svg"
                                                    >
                                                        <path
                                                        fill-rule="evenodd"
                                                        clip-rule="evenodd"
                                                        d="M4.394 14.7L13.75 9.3c1-.577 1-2.02 0-2.598L4.394 1.299a1.5 1.5 0 00-2.25 1.3v3.438l4.059 1.088c.494.132.494.833 0 .966l-4.06 1.087v4.224a1.5 1.5 0 002.25 1.299z"
                                                        fill="currentColor"
                                                        ></path>
                                                    </svg>
                                                </button>
                                                <svg class="lead-done-icon" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="18px" width="18px" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm-1.999 14.413-3.713-3.705L7.7 11.292l2.299 2.295 5.294-5.294 1.414 1.414-6.706 6.706z"></path></svg>
                                                <div class='chat-loading-dot-cont'>
                                                    <div class="chat-loading-dot"></div>
                                                    <div class="chat-loading-dot"></div>
                                                    <div class="chat-loading-dot"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>`;
                            chatMessages.insertAdjacentHTML("beforeend", collectEmailMarkup);
                            enableEmailCollection();
                            isFirstMessage = false;
                        }
                    }

                    chatMessages.scrollTop = chatMessages.scrollHeight;
                }, () => {
                    msgHolder.innerHTML = 'Oops! I am unable to answer right now!';
                });
            } else {
                if (!sessionId) {
                    sessionId = await createSession({
                        userAgent: userAgent
                    });
                    notifyNewSession(sessionId);
                }
                const response = await getAnswer(sessionId, message);
                const markdownRes = marked.parse(
                    response.replace(/^[\u200B\u200C\u200D\u200E\u200F\uFEFF]/, "")
                )
                chatMessages.insertAdjacentHTML("beforeend",
                    `<div class="chat-message chatbot"><div class="chat-message-text">${markdownRes}</div></div>`)
            }
        }

        async function saveEmail(email) {
            const input = document.getElementById('lead-email-input');
            email = email || input.value.trim();
            if (!email) return;
            const $emailFormCont = document.getElementById('chat-message-form-email');
            $emailFormCont.classList.add('chat-message-form-loading');
            try {
                await updateSession(sessionId, {
                    email: email,
                    userAgent: getUserAgent(),
                    origin: origin
                });
            } catch (error) {
                console.log(error);
            } finally {
                $emailFormCont.classList.remove('chat-message-form-loading');
                $emailFormCont.classList.add('chat-message-form-submitted');
            }
        }

        function enableEmailCollection() {
            const leadInputForm = document.getElementById('lead-email-form');
            const emailInput = document.getElementById('lead-email-input');
            emailInput.addEventListener('keydown', (e) => {
                if (e.keyCode === 13 || e.key === "Enter") {
                    e.preventDefault();
                    saveEmail();
                }
                const $emailFormCont = document.getElementById('chat-message-form-email');
                $emailFormCont.classList.remove('chat-message-form-submitted');
            });
            document.getElementById('lead-email-input-submit').addEventListener('click', (e) => {
                e.preventDefault();
                saveEmail();
            })
        }


        // JavaScript code to handle the chat form submission
        const form = document.getElementById('chat-form');

        form.addEventListener('submit', async (e) => {
            e.preventDefault();
            addMessageToChat();
        });

        document.getElementById('chat-input').onkeydown = function(e) {
            if (e.key === "Enter" && !e.shiftKey && !e.ctrlKey && !e.metaKey) {
                e.preventDefault();
                addMessageToChat();
            }
        };


        function notifyParentWidgetExpand() {
            window.top.postMessage('webwhiz:widget_expand', '*');
        }
        function notifyParentWidgetMaximize() {
            window.top.postMessage('webwhiz:widget_maximize', '*');
        }
        function notifyParentWidgetMinimize() {
            window.top.postMessage('webwhiz:widget_minimize', '*');
        }
        function notifyClearHistory() {
            window.top.postMessage('webwhiz:widget_clear_history', '*');
        }

        function notifyParentWidgetCollapse() {
            window.top.postMessage('webwhiz:widget_collapse', '*');
        }

        function notifyWidgetConfig(config) {
            window.top.postMessage({
                messageType: 'webwhiz:widget_config',
                config: config
            }, '*');
        }

        function notifyNewSession(sessionId) {
            window.top.postMessage({
                messageType: 'webwhiz:recieve_new_session_id',
                sessionId: sessionId || ''
            }, '*');
        }

        function requestMetaData() {
            window.top.postMessage('webwhiz:request_meta_data', '*');
        }



        function requestSessionId() {
            window.top.postMessage('webwhiz:request_session_id', '*');
        }

        function requestIsManualChat() {
            window.top.postMessage('webwhiz:request_is_manual_chat', '*');
        }

        function updateIsManualChat(isManualChat) {
            window.top.postMessage({
                messageType: 'webwhiz:update_is_manual_chat',
                isManualChat: isManualChat || false
            }, '*');
        }


        const offlineMessageBtn = document.getElementById('offline-message-submit');

        if (offlineMessageBtn) {
            const $name = document.getElementById('offline-message-name')
            const $email = document.getElementById('offline-message-email')
            const $message = document.getElementById('offline-message-message')
            const $invlidEmail = document.getElementById('invalid-feedback-email');
            const $invlidEmailInvalid = document.getElementById('invalid-feedback-email-invalid');
            const $invlidName = document.getElementById('invalid-feedback-name')
            const $invlidMessage = document.getElementById('invalid-feedback-message')

            $name.addEventListener('blur', (e) => {
                if (e.target.value) {
                    $invlidName.classList.remove('feedback-visible')
                } else {
                    $invlidName.classList.add('feedback-visible')
                }
            })
            $email.addEventListener('blur', (e) => {
                if (e.target.value) {
                    const email = e.target.value;
                    const isValidEmail = validateEmail(email);
                    if (!isValidEmail) {
                        $invlidEmailInvalid.classList.add('feedback-visible');
                    } else {
                        $invlidEmailInvalid.classList.remove('feedback-visible');
                    }
                    $invlidEmail.classList.remove('feedback-visible');
                } else {
                    $invlidEmail.classList.add('feedback-visible');
                    $invlidEmailInvalid.classList.remove('feedback-visible');
                }
            })
            $message.addEventListener('blur', (e) => {
                if (e.target.value) {
                    $invlidMessage.classList.remove('feedback-visible')
                } else {
                    $invlidMessage.classList.add('feedback-visible')
                }
            })

            offlineMessageBtn.addEventListener('click', async (e) => {
                e.preventDefault();
                const name = $name.value;
                const email = $email.value;
                const message = $message.value;



                const isValidEmail = validateEmail(email);

                console.log(isValidEmail, name, message)

                if (isValidEmail && name && message) {

                    const prevBtnText = offlineMessageBtn.innerHTML;
                    offlineMessageBtn.innerHTML = formSubmitBtnSubmittingText;
                    offlineMessageBtn.setAttribute('disabled', true);
                    if (!sessionId) {
                        sessionId = await createSession({
                            userAgent: getUserAgent(),
                            origin: origin
                        });
                        notifyNewSession(sessionId);
                    }

                    const response = await fetch(
                        `${baseURL}${'/offline_msg'}`,
                        {
                            method: 'POST', // *GET, POST, PUT, DELETE, etc.
                            mode: 'cors', // no-cors, *cors, same-origin
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            body: JSON.stringify({
                                "name": name,
                                "email": email,
                                "knowledgebaseId": knowledgebaseId,
                                "message": message,
                                "sessionId": sessionId,
                            }), // body data type must match "Content-Type" header
                        }
                    );

                    const $offlineMessage = document.getElementById('offline-message');

                    if (response.status === 201) {
                        const result = await response.text()
                        $name.value = '';
                        $email.value = '';
                        $message.value = '';
                        $invlidEmail.classList.remove('feedback-visible');
                        $invlidName.classList.remove('feedback-visible');
                        $invlidEmailInvalid.classList.remove('feedback-visible');
                        $invlidMessage.classList.remove('feedback-visible');

                        $offlineMessage.classList.add('show-success-msg');
                    } else {
                        $offlineMessage.classList.add('show-error-msg');
                    }
                    offlineMessageBtn.innerHTML = prevBtnText;
                    offlineMessageBtn.removeAttribute('disabled');
                } else {
                    if (email && !isValidEmail) {
                        $invlidEmail.classList.remove('feedback-visible');
                        $invlidEmailInvalid.classList.add('feedback-visible');
                    }
                    if (!email) {
                        $invlidEmail.classList.add('feedback-visible');
                        $invlidEmailInvalid.classList.remove('feedback-visible');
                    }

                    if (email && isValidEmail) {
                        $invlidEmail.classList.remove('feedback-visible');
                        $invlidEmailInvalid.classList.remove('feedback-visible');
                    }

                    if (!name) {
                        $invlidName.classList.add('feedback-visible');
                    } else {
                        $invlidName.classList.remove('feedback-visible');
                    }
                    if (!message) {
                        $invlidMessage.classList.add('feedback-visible');
                    } else {
                        $invlidMessage.classList.remove('feedback-visible');
                    }
                }
            });

            const $offlineMessageClose = document.getElementById('offline-message-success-close');
            const $offlineMessageErrorClose = document.getElementById('offline-message-error-close');
            const $offlineMessage = document.getElementById('offline-message');

            $offlineMessageClose.addEventListener('click', () => {
                $offlineMessage.classList.remove('show-success-msg');
            })
            $offlineMessageErrorClose.addEventListener('click', () => {
                $offlineMessage.classList.remove('show-error-msg');
            })

        }


        const aiAssistantTab = document.getElementById('tab-ai-assistant');
        const offlineMsgTab = document.getElementById('tab-offline-msg');
        const tabsActive = document.getElementById('tabs-active');

        const chatWrap = document.getElementById('chat-wrap');

        if (offlineMsgTab) {
            offlineMsgTab.addEventListener('click', function() {
                const width = offlineMsgTab.offsetWidth;
                const left = aiAssistantTab.offsetWidth;
                tabsActive.style.width = `${width - 5}px`;
                tabsActive.style.left = `${left + 5}px`;
                chatWrap.classList.add('chat-wrap-offline');
                chatWrap.classList.remove('chat-wrap-ai-assistant');

            });
        }
        if (aiAssistantTab) {
            aiAssistantTab.addEventListener('click', function() {
                const width = aiAssistantTab.offsetWidth;
                tabsActive.style.width = `${width - 5}px`;
                tabsActive.style.left = `4px`;
                chatWrap.classList.add('chat-wrap-ai-assistant');
                chatWrap.classList.remove('chat-wrap-offline');
            });
        }

</script>
</body>


</html>